<template>
  <div id="app">
	  
    	<!-- 登录注册切换 -->
		<div class="title">
		<router-link to="/login">登录</router-link> |
		<router-link to="/register">注册</router-link>
		</div>
		
		<!-- 背景图 -->
		<img @click="ImgChange(0)" class="bg" :class="{bg_img:bgfilter}" :src="bgd_img">
    
		<!-- 登录框 -->
		<div id="login">
			<img  class="login_img"  :src="header_img" />
		    <input @click="ImgChange(1)" v-model="login_msg.userid" name="userid" type="text" placeholder="账号" />
		    <input @click="ImgChange(1)" v-model="login_msg.password" name="password" type="password" placeholder="密码" />
			<button @click="login">登录</button>
		</div>
    
  </div> 
</template>

<script>

export default {
  name: 'app',
  components: {

  },
  data(){
	  return{
		  bgfilter:false, //高斯模糊变换标志
		  bgd_img:require("../assets/img/login_bgd.jpg"), //背景图片
		  header_img:require("../assets/img/login.png"),   //静态登录头像
		  
		  //登录信息
		  login_msg:{
			  userid:"",
			  password:""
		  }
	  }
  },
  methods:{
	  
  //登录
  
  login:function(){
	  
	  var server = this.$myConfig.server
	  
	  if(this.userid !='' && this.password != ''){
	     let data={userid:this.login_msg.userid,
	  			   password:this.login_msg.password,
	  			   }
	  this.$axios({
		  method: 'post',
		  url: server + "/user/login",
		  withCredentials:true,
		  data:data
		  })
		  .then((res)=>{
		  console.log(res);
		  if(res.data.status == 1){
			 //定位
			 const geolocation = new BMap.Geolocation();
			 var _this = this;
			 geolocation.getCurrentPosition(function getinfo(position){
			     let province = position.address.province;     //获取省份信息
			     _this.$store.state.UserInfo.province = province;
			 	//更新省份
			 	let data={
			 		province:province,
			 	}
			 	_this.$axios({
					method: 'post',
		            url: server + "/user/changeProvince",
		            withCredentials:true,
					data:data,
					}).then((response)=>{
			 				  if(response.data.status == 1){
			 				      console.log("省份更新成功");
			 				      }else{
			 				      console.log("省份更新失败！");	  
			 				            }
			 		    })
			   }, function(e) {
			 	  this.$message.error('定位失败！')
			                  }, {provider: 'baidu'});      
							  
	  			this.$store.state.UserInfo.userid = this.login_msg.userid;
				//将用户信息记录到store全局变量中
	         this.$axios({
				 method: 'get',
				 url: server + "/user/userinfo",
				 withCredentials:true,
				 }).then((response)=>{
					 console.log(response);
			    this.$store.state.UserInfo.age = response.paras.paras.age;
				this.$store.state.UserInfo.email = response.paras.paras.email;
				this.$store.state.UserInfo.gender = response.paras.paras.gender;
				this.$store.state.UserInfo.introduction = response.paras.paras.introduction;
				this.$store.state.UserInfo.username = response.paras.paras.username;					 	  		                     
				})
				
				//改变登录状态
				this.$store.state.isLogin = true;
				this.$message({
				          message: '登录成功',
				          type: 'success'
				        });
				this.timer = setTimeout(()=>{  //设置延迟执行
				  this.$router.push("/");
				  history.pushState(null, null, document.URL);
				  window.addEventListener("popstate",function(e) {  
				      history.pushState(null, null, document.URL);
				  }, false);
				},1000);
				//跳转到主页，同时不允许返回
			    
	  	 }else{
			 this.$message.error('登录失败！');
	  	       }
	  })						
	}
	 else  this.$message.error('请完整登录信息！');				  
},

  //点击登录区域背景高斯虚化
  ImgChange:function(data) {
  	  if(data)  this.bgfilter = true;
  	  else  this.bgfilter = false;
  },
  
  }
}
</script>

<style scoped>
	
html,body,#app {
  margin: 0; 
  padding: 0;
  font-family: "Raleway", Arial, Helvetica, sans-serif;
}

.title{
	position: absolute;
	margin: 15px;
}

div > a {
	transition: color 0.2s ease-in-out;
	display: inline-block;
	padding: 0 1.25em;
	text-decoration: none;
	color: #FFF;
}

div > a:hover {
	color: #3498db;
}

/*高斯虚化*/
.bg_img {
    display: block;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    object-fit: cover;
    transform: scale(1.3);
}

.bg {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all .25s;
    width: 100%;
    z-index: -1;
}

#login {
	opacity: 0.95;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.05);
	border-radius: 10px;
	box-shadow: rgb(0 0 0 / 10%) 0 20px 50px;
	padding: 30px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	transition: all .25s;
	width: 350px;
	text-align: center;
}

.login_img {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	
}

input{
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 5px;
	display: block;
	font-size: 14px;
	margin: 15px 0;
	padding: 10px 15px;
	width: 91%;
	transition: border-color .2s;
		
}

button{
	background-color: rgb(102,102,102);
	border-radius: 5px;
	border-style: none;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 16px;
	margin: 15px 0;
	padding: 10px 15px;
	transition: all .25s;
	width: 100%;
}
button:hover {
    filter: brightness(1.1);
}

</style>
